<template>
  <div class="main">
    <van-nav-bar title="地图找房" left-arrow @click-left="onClickLeft" />
    <!--    @ready="handler" -->
    <baidu-map
      class="map"
      :center="center"
      :zoom="10"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bm-scale anchor="BMAP_ANCHOR_LEFT_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-label
        v-for="(itme, index) in jingwei"
        :key="index"
        :content="`${itme.label}${itme.count}套`"
        :position="{ lng: itme.coord.longitude, lat: itme.coord.latitude }"
        @click="changeadd(itme)"
        :labelStyle="{
          backgroundColor: '#24b86a',
          fontSize: '24px',
          width: '60px',
          height: '60px',
          borderRadius: '50px',
          textAlign: 'center',
          lineHeight: '60px',
          fontSize: '12px',
          color: '#fff',
          border: 'unset'
        }"
        title="Hover me"
      />
    </baidu-map>
  </div>
</template>

<script>
// import { BmlMarkerClusterer } from 'vue-baidu-map'
import { mapgetApi } from '@/api'
export default {
  // components: { BmlMarkerClusterer },
  name: 'MapVGL',
  data() {
    return {
      ak: '37krm3tYF6sX1osayW0lU7VGpOdMRXKd',
      center: { lng: 120.12, lat: 30.16 },
      zoom: 3,
      markers: [],
      id: 'AREA|19b39d4f-8a36-d6f8',
      jingwei: []
    }
  },
  async created() {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    const { data } = await mapgetApi(this.id)
    this.jingwei = data.body
    this.$toast.success('获取成功')
  },
  mounted() {
    // 插入 10 个随机点
    // for (let i = 0; i < 12; i++) {
    //   const position = {
    //     lng: Math.random() * 40 + 85,
    //     lat: Math.random() * 30 + 21
    //   }
    //   this.markers.push(position)
    // }
  },
  methods: {
    onClickLeft() {
      // this.$router.push({ path: '/home/sertch' })
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
    },
    async changeadd(a) {
      try {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0
        })
        const { data } = await mapgetApi(a.value)
        this.center.lng = a.coord.longitude
        this.center.lat = a.coord.latitude
        console.log(data.body)
        this.jingwei = data.body
        this.$toast.success('获取成功')
      } catch (error) {
        this.$toast.fail('失败')
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
:deep(.main) {
  height: 667px;
}
:deep(.van-nav-bar__title) {
  color: #fff;
}
#allmap {
  width: 600px;
  height: 400px;
}
:deep(.van-nav-bar) {
  background-color: #21b97a !important;
  .van-icon {
    color: #fff;
  }
}
.Map {
  height: 100%;
  width: 100%;
  #container {
    height: 100%;
  }
}
.map {
  width: 100%;
  height: calc(100vh - 92px);
}
.vids {
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  color: #fff;
  border: unset;
}
</style>
